<template>
    <UxDialog class="make-order" :visible="value" :beforeClose="beforeClose" @show="onShow()" @back="onClose()" @close="onClose()">
        <div class="maker-order">

            <UxLoading2 :loading="loading" v-if="loading" />

            <template v-else>
                <div class="maker-sample">
                    <figure>
                        <img src="@/assets/images/order/dialog-order-simple.png" alt="">
                    </figure>
                    <strong>Sample order</strong>
                    <span>Order a sample to test our product quality and see how your design works</span>
                    <button @click="createSampleOrder()" type="secondary">Place an order</button>
                </div>

                <div class="maker-empty" v-if="stores.length == 0">
                    <figure><img src="@/assets/images/synchronize/dialog-store-empty.png"></figure>
                    <strong>Store order</strong>
                    <span>Publish this item to your online store and start selling to your customers</span>
                    <button @click="addShop()" type="secondary">Connect store</button>
                </div>

                <div class="maker-store" v-else>
                    <h3>
                        <strong>Create retail order</strong>
                        <span>This order will be moved under the store you select.</span>
                    </h3>
                    <ul>
                        <li v-for="item in stores" :key="item.id" @click="createShopOrder(item)">
                            <StoreIconName :item="item" />
                        </li>
                    </ul>
                </div>
            </template>
        </div>

        <OrderProductSelect class="maker-product" v-model="product_dialog" @selectDesign="insertDesign($event)" />
    </UxDialog>
</template>

<script>
export default {
    name: "MakerOrder",
    props: {
        value: { type: [Object, Array], default: () => null },
        beforeClose: { type: Function, default: () => null },
    },
    data () {
        return {
            loading: false,
            product_dialog: false,
            stores: [],
            shop_id: null, // 当前选中的商店
            products: [], // 要添加的产品列表
        };
    },
    methods: {
        onShow () {
            const products = Array.isArray(this.value) ? this.value : [this.value];
            this.stores.length == 0 && this.getStore();
            this.products = products.filter(i => i && i.spu)
        },

        onClose () {
            this.$emit("input", null);
        },

        // 创建样品订单
        createSampleOrder () {
            this.shop_id = 0;
            this.jumpToOrder()
        },

        // 商店订单
        createShopOrder (shop) {
            this.shop_id = shop.id;
            this.jumpToOrder()
        },

        // 选择完产品
        insertDesign (products) {
            products.map(product => this.products.push(product))
            if (this.products.length > 0) {
                this.product_dialog = null;
                this.jumpToOrder();
            }
        },

        jumpToOrder () {
            if (this.products.length > 0) {
                this.$store.dispatch("order/init", {
                    shop_id: this.shop_id,
                    product: this.products
                });
                // 关闭弹窗
                this.$router.push("/order/product");
                this.onClose();
            } else {
                this.product_dialog = true;
            }
        },

        // 添加店铺
        addShop () {
            this.$router.push("/user/store");
            this.onClose();
        },
        async getStore () {
            this.loading = true;
            let response = await this.$http("UserStore.getAllLinkStore");
            this.stores = response.data || [];
            this.loading = false;

        },
    },
    mounted () { },
};
</script>

<style lang="scss" scoped>
.maker-order {
    width: 680px;
    min-height: 400px;
    display: flex;
    justify-items: center;
    .loading {
        background: none;
        z-index: 0;
    }
}

.maker-sample {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 58px 40px;
    box-sizing: border-box;

    &::before {
        content: '';
        position: absolute;
        left: 100%;
        top: 50%;
        width: 1px;
        height: 256px;
        transform: translateY(-50%);
        background-color: #ebebeb;
    }

    &::after {
        content: '';
        position: absolute;
        left: 100%;
        top: 50%;
        width: 1px;
        height: 1px;
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: translateY(-50%);
        background-color: #ebebeb;
    }

    figure {
        width: 42px;
        height: 42px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    strong {
        margin-top: 32px;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
    }

    span {
        margin-top: 10px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 18px;
        text-align: center;
    }

    button {
        margin-top: 24px;
        width: 120px;
        height: 36px;
    }
}

.maker-empty {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 58px 40px;
    box-sizing: border-box;

    figure {
        width: 204px;
        height: 42px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    strong {
        margin-top: 32px;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
    }

    span {
        margin-top: 10px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 18px;
        text-align: center;
    }

    button {
        margin-top: 24px;
        width: 120px;
        height: 36px;
    }
}

.maker-store {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 58px;
    box-sizing: border-box;

    h3 {
        display: flex;
        flex-direction: column;
        strong {
            font-size: 16px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 20px;
        }
        span {
            margin-top: 12px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #292929;
            line-height: 18px;
        }
    }

    ul {
        margin-top: 12px;
        li {
            height: 36px;
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            display: flex;
            align-items: center;
            padding: 0 8px;
            cursor: pointer;
            transition: background 0.2s;

            & + li {
                margin-top: 6px;
            }

            &:hover {
                background: #f6f6f6;
            }

            &[error='error'] {
                span {
                    color: #9e9e9e;
                }
            }
        }
    }
}

.maker-product {
    background: none !important;
}
</style>
